
Page({

  /**
   * 页面的初始数据
   */
  data: {
    zh: '',
    schema:[],
    x: 0,
    y: 0,
    formData:{
      src: 'https://image-c.weimobwmc.com/ol-6NoGC/ca576cf801cb46e48e5eedb23fd30f22.jpg',
      'referrer-policy': 'no-referrer',
      'scroll-top': 0,
      'hover-class': 'none',
      'hover-stop-propagation': false,
      'hover-start-time': 50,
      'hover-stay-time': 400,
      'scale-area': false,


      direction: 'none',
      inertia:false,
      'out-of-bounds': false,
      x: 0,
      y: 0,
      damping: 20,
      friction: 2,
      disabled: false,
      scale: false,
      'scale-min': 0.1,
      'scale-max': 10,
      'scale-value': 1,
      animation: true,

      duration: 300,
      'z-index': 100,
      overlay: true,
      position: 'bottom',
      round: false,
      'close-on-slide-down': false,
      'overlay-style': '',
      'custom-style': '',

      enable: true,
      externalClass: '',

      'indicator-dots': false,
      'indicator-color': 'rgba(0, 0, 0, .3)',
      'indicator-active-color': '#000000',
      autoplay: false,
      current: 0,
      interval: 5000,
      duration: 500,
      circular: false,
      vertical: false,
      'display-multiple-items': 1,
      'previous-margin': '0px',
      'next-margin': '0px',
      'easing-function': 'default',
      'direction': 'all',
      'snap-to-edge': false,

      'item-id': 'id-1',
      'skip-hidden-item-layout': false,

      'scroll-x': false,
      'scroll-y': true,
      'upper-threshold': 50,
      'lower-threshold': 50,
      'scroll-top': 0,
      'scroll-left': 0,
      'scroll-into-view': '',
      'scroll-into-view-offset': 0,
      'scroll-with-animation': false,
      'enable-back-to-top': false,
      'enable-passive': false,
      'refresher-enabled': false,
      'refresher-threshold': 45,
      'refresher-default-style': 'black',
      'refresher-background': '',
      'refresher-triggered': false,
      'bounces': true,
      'show-scrollbar': true,
      'fast-deceleration': false,
      'enable-flex': false,
      'enhanced': false,
      'paging-enabled': false,
      'using-sticky': false,
    },
    title: '',
    result: '',
    remark: '',
    webUrl: '',
    apiName: '',
    showPrivacy: false,
    show: false,
    rootshow: false,
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3', 'demo-text-4']
  },
  onUnload() {
  },
  onLoad(options) {
    console.log('options', options)
    wx.setNavigationBarTitle({
      title: options.title,
    })
    
    this.setData({
      title: options.title,
      zh:options.zh,
      remark: options.remark,
      webUrl: options.webUrl
    })

    if(options.zh === 'cover-image') {
      this.setData({
        schema: [
          {
            label:'图标路径，支持临时路径、网络地址（1.6.0起支持）、云文件ID（2.2.3起支持）。',
            prop:'src',
            type:'text'
          },
          {
            label:'格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；',
            prop:'referrer-policy',
            type:'text'
          }
        ]
      })
    }
    if(options.zh === 'cover-view') {
      this.setData({
        schema: [
          {
            label:'设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效',
            prop:'scroll-top',
            type:'number'
          },
        ]
      })
    }
    if(options.zh === 'view') {
      this.setData({
        schema: [
          {
            label:'指定按下去的样式类。当 hover-class="none" 时，没有点击态效果',
            prop: 'hover-class',
            type:'picker',
            labelOptions:['none', 'back-pink', 'back-blue', 'back-green'],
            valueOptions:['none', 'back-pink', 'back-blue', 'back-green'],
          },
          {
            label:'指定是否阻止本节点的祖先节点出现点击态',
            prop:'hover-stop-propagation',
            type:'switch'
          },
          {
            label:'按住后多久出现点击态，单位毫秒',
            prop:'hover-start-time',
            type:'number'
          },
          {
            label:'手指松开后点击态保留时间，单位毫秒',
            prop:'hover-stay-time',
            type:'number'
          },
        ]
      })
    }
    if(options.zh === 'movable-area') {
      this.setData({
        schema: [
          {
            label:'当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area',
            prop: 'scale-area',
            type:'switch'
          },
        ]
      })
    }
    if(options.zh === 'movable-view') {
      this.setData({
        schema: [
          {
            label:'movable-view的移动方向，属性值有all、vertical、horizontal、none',
            prop: 'direction',
            type:'picker',
            labelOptions:['none', 'all', 'vertical', 'horizontal'],
            valueOptions:['none', 'all', 'vertical', 'horizontal'],
          },
          {
            label:'movable-view是否带有惯性',
            prop: 'inertia',
            type:'switch',
          },
          {
            label:'超过可移动区域后，movable-view是否还可以移动',
            prop: 'out-of-bounds',
            type:'switch',
          },
          {
            label:'定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画；单位支持px（默认）、rpx；',
            prop: 'x',
            type:'number',
          },
          {
            label:'定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画；单位支持px（默认）、rpx；',
            prop: 'y',
            type:'number',
          },
          {
            label:'阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快',
            prop: 'damping',
            type:'number',
          },
          {
            label:'摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值',
            prop: 'friction',
            type:'number',
          },
          {
            label:'是否禁用',
            prop: 'disabled',
            type:'switch',
          },
          {
            label:'是否支持双指缩放，默认缩放手势生效区域是在movable-view内',
            prop: 'scale',
            type:'switch',
          },
          {
            label:'定义缩放倍数最小值',
            prop: 'scale-min',
            type:'number',
          },
          {
            label:'定义缩放倍数最大值',
            prop: 'scale-max',
            type:'number',
          },
          {
            label:'定义缩放倍数，取值范围为 0.1 - 10',
            prop: 'scale-value',
            type:'number',
          },
          {
            label:'是否使用动画',
            prop: 'animation',
            type:'switch',
          },
        ]
      })
    }
    if(options.zh === 'page-container') {
      this.setData({
        schema: [
          {
            label:'动画时长，单位毫秒',
            prop: 'duration',
            type:'number'
          },
          {
            label:'z-index 层级',
            prop: 'z-index',
            type:'number'
          },
          {
            label:'是否显示遮罩层',
            prop: 'overlay',
            type:'switch'
          },
          {
            label:'弹出位置，可选值为 top bottom right center',
            prop: 'position',
            type:'picker',
            labelOptions:['top', 'bottom', 'right', 'center'],
            valueOptions:['top', 'bottom', 'right', 'center'],
          },
          {
            label:'是否显示圆角',
            prop: 'round',
            type:'switch'
          },
          {
            label:'是否在下滑一段距离后关闭',
            prop: 'close-on-slide-down',
            type:'switch'
          },
          {
            label:'自定义遮罩层样式',
            prop: 'overlay-style',
            type:'text'
          },
          {
            label:'自定义弹出层样式',
            prop: 'custom-style',
            type:'text'
          },
        ]
      })
    }
    if(options.zh === 'root-portal') {
      this.setData({
        schema: [
          {
            label:'是否从页面中脱离出来',
            prop: 'enable',
            type:'switch'
          },
          {
            label:'外部样式类',
            prop: 'externalClass',
            type:'text'
          },
        ]
      })
    }
    if(options.zh === 'scroll-view') {
      this.setData({
        schema: [
          {
            label:'允许横向滚动',
            prop: 'scroll-x',
            type:'switch'
          },
          {
            label:'允许纵向滚动',
            prop: 'scroll-y',
            type:'switch'
          },
          {
            label:'距顶部/左边多远时，触发 scrolltoupper 事件',
            prop: 'upper-threshold',
            type:'number'
          },
          {
            label:'距底部/右边多远时，触发 scrolltolower 事件',
            prop: 'lower-threshold',
            type:'number'
          },
          {
            label:'设置竖向滚动条位置',
            prop: 'scroll-top',
            type:'number'
          },
          {
            label:'设置横向滚动条位置',
            prop: 'scroll-left',
            type:'number'
          },
          {
            label:'值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素',
            prop: 'scroll-into-view',
            type:'text'
          },
          {
            label:'跳转到 scroll-into-view 目标节点时的额外偏移。skyline 自 3.1.0 版本开始支持，webview 自 3.6.0 版本开始支持。',
            prop: 'scroll-into-view-offset',
            type:'number'
          },
          {
            label:'在设置滚动条位置时使用动画过渡',
            prop: 'scroll-with-animation',
            type:'switch'
          },
          {
            label:'iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启。鸿蒙 OS 暂不支持',
            prop: 'enable-back-to-top',
            type:'switch'
          },
          {
            label:'开启 passive 特性，能优化一定的滚动性能',
            prop: 'enable-passive',
            type:'switch'
          },
          {
            label:'开启自定义下拉刷新',
            prop: 'refresher-enabled',
            type:'switch'
          },
          {
            label:'设置自定义下拉刷新阈值',
            prop: 'refresher-threshold',
            type:'number'
          },
          {
            label:'设置自定义下拉刷新默认样式，支持设置 black | white | none， none 表示不使用默认样式',
            prop: 'refresher-default-style',
            type:'picker',
            labelOptions:['black', 'white', 'none'],
            valueOptions:['black', 'white', 'none'],
          },
          {
            label:'设置自定义下拉刷新区域背景颜色，默认为透明',
            prop: 'refresher-background',
            type:'text'
          },
          {
            label:'设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发',
            prop: 'refresher-triggered',
            type:'switch'
          },
          {
            label:'iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)',
            prop: 'bounces',
            type:'switch'
          },
          {
            label:'滚动条显隐控制 (同时开启 enhanced 属性后生效)',
            prop: 'show-scrollbar',
            type:'switch'
          },
          {
            label:'滑动减速速率控制, 仅在 iOS 下生效 (同时开启 enhanced 属性后生效)',
            prop: 'fast-deceleration',
            type:'switch'
          },
          {
            label:'启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。',
            prop: 'enable-flex',
            type:'switch'
          },
          {
            label:'启用 scroll-view 增强特性，启用后可通过 ScrollViewContext 操作 scroll-view。鸿蒙 OS 暂不支持 enhanced 及其相关的属性和方法。',
            prop: 'enhanced',
            type:'switch'
          },
          {
            label:'分页滑动效果 (同时开启 enhanced 属性后生效)',
            prop: 'paging-enabled',
            type:'switch'
          },
          {
            label:'使 scroll-view 下的 position sticky 特性生效，否则滚动一屏后 sticky 元素会被隐藏',
            prop: 'using-sticky',
            type:'switch'
          },
        ]
      })
    }
    if(options.zh === 'swiper') {
      this.setData({
        schema: [
          {
            label:'是否显示面板指示点',
            prop: 'indicator-dots',
            type:'switch'
          },
          {
            label:'指示点颜色',
            prop: 'indicator-color',
            type:'text'
          },
          {
            label:'当前选中的指示点颜色',
            prop: 'indicator-active-color',
            type:'text'
          },
          {
            label:'是否自动切换',
            prop: 'autoplay',
            type:'switch'
          },
          {
            label:'当前所在滑块的 index',
            prop: 'current',
            type:'number'
          },
          {
            label:'自动切换时间间隔',
            prop: 'interval',
            type:'number'
          },
          {
            label:'滑动动画时长',
            prop: 'duration',
            type:'number'
          },
          {
            label:'是否采用衔接滑动',
            prop: 'circular',
            type:'switch'
          },
          {
            label:'滑动方向是否为纵向',
            prop: 'vertical',
            type:'switch'
          },
          {
            label:'同时显示的滑块数量',
            prop: 'display-multiple-items',
            type:'number'
          },
          {
            label:'前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值',
            prop: 'previous-margin',
            type:'text'
          },
          {
            label:'后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值。skyline 于 3.5.1 版本支持',
            prop: 'next-margin',
            type:'text'
          },
          {
            label:'指定 swiper 切换缓动动画类型',
            prop: 'easing-function',
            type:'picker',
            labelOptions:['默认缓动函数', '线性动画', '缓入动画', '缓出动画', '缓入缓出动画'],
            valueOptions:['default', 'linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic'],
          },
          {
            label:'指定 swiper 滑动方向',
            prop: 'direction',
            type:'picker',
            labelOptions:['默认', '如 vertical 为 true 时，允许用户下滑（swiper 内容向上滚动），为 false 时，允许用户右滑（swiper 内容向左滚动）', '如 vertical 为 true 时，允许用户上滑（swiper 内容向下滚动），为 false 时，允许用户左滑（swiper 内容向右滚动）'],
            valueOptions:['all', 'positive', 'negative'],
          },
        ]
      })
    }
    if(options.zh === 'swiper-item') {
      this.setData({
        schema: [
          {
            label:'该 swiper-item 的标识符',
            prop: 'item-id',
            type:'text'
          },
          {
            label:'是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息',
            prop: 'skip-hidden-item-layout',
            type:'switch'
          },
        ]
      })
    }
  },
  getFormData(e) {
    console.log('formdata==', e.detail.formData);
    this.setData({
      formData: e.detail.formData
    })
  },
  bindload(e) {
    this.setData({
      result: e,
      apiName: 'cover-image'
    })
  },
  binderror(e) {
    this.setData({
      result: e,
      apiName: 'cover-image'
    })
  },
  pageContainer() {
    this.setData({
      show: true
    })
  },
  exit() {
    this.setData({
      show: false
    })
  },
  rootPortal() {
    this.setData({
      rootshow: true
    })
  },
  exitPortal() {
    this.setData({
      rootshow: false
    })
  },
  toSkyline() {
    wx.navigateTo({
      url: `/packageComponent/pages/view/skylineSwiper/skylineSwiper?title=${this.data.title}&zh=${this.data.zh}&remark=${this.data.remark}&webUrl=${this.data.webUrl}`,
    })
  },
  toSkylineScroll() {
    wx.navigateTo({
      url: `/packageComponent/pages/view/skylineScroll/skylineScroll?title=${this.data.title}&zh=${this.data.zh}&remark=${this.data.remark}&webUrl=${this.data.webUrl}`,
    })
  },
  coverImage(e) {
    
  },
})